<template>
	<!-- 话题页 -->
	<view class="page_body whith_bg">

		<!-- 状态栏 -->
		<view class="status_bar"></view>

		<!-- 导航栏 -->
		<view style="display: flex;top: 0;width: 750upx;">
			<u-tabs style="width: 750upx;background-color: #FFFFFF;"  :current="currentTab" :list="tabList" @click="tabsClick"
					:scrollable="false" :activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}">
				<view slot="right" style="float: left;margin-right: 8px;" @tap="gotoCreate()" >
					<view class="article_btns">
						<u-button  shape='circle' size="mini" type="primary" text="+ 创建" color="#007AFF"></u-button>
					</view>
				</view>
			</u-tabs>
		</view>
		
		<view style="height: 2px;width: 100%;background-color: #efefef;"></view>


		<!-- 信息列表 -->
		<swiper :style="{height:wHeight-tabbarHeight-navbaHeight + 'px'}" :current="currentTab" @change="changeSwiper" @touchmove.stop>

			<!-- 我的话题 -->
			<swiper-item>
				<my-topic ref="myTopicCpn" :height="wHeight-tabbarHeight-navbaHeight"></my-topic>
			</swiper-item>
			


			<!-- 话题广场 -->
			<swiper-item>
				<!-- 搜索框 -->
				<view style="width: 700rpx;background-color: #FFFFFF;padding: 2px 25upx 10px 25upx;height: 34px;" @tap.stop="goSearch()">
					<u-search  shape="round" inputAlign="center" :showAction="false" ></u-search>
				</view>

				<view style="padding-top: 3px;" >
					<topic-list ref="topicList" :height="wHeight-tabbarHeight-navbaHeight-searchHeight"></topic-list>
				</view>

			</swiper-item>
		</swiper>
		
		<u-toast ref="uToast"></u-toast>


		<!-- 底部导航栏	 -->
		<tabbar :currentTabbar="1"></tabbar>

	</view>
</template>

<script>
	import tabbar from '@/components/tabbar.vue'
	import myTopic from "@/pages/topic/cpns/myTopic.vue"
	import TopicList from "@/pages/topic/cpns/topicList.vue"
	export default {
		components: {
			tabbar,
			myTopic,
			TopicList
		},
		data() {
			return {
				// 底部导航栏高度
				tabbarHeight: 50,
				// 导航栏高度
				navbaHeight: 46,
				// 搜索框高度
				searchHeight: 46,
				// 窗口高度
				wHeight: null,
				// 菜单分类
				tabList: [{
						id: 1,
						name: '我的话题',
						selected: false
					},{
						id: 2,
						name: '话题广场',
						selected: true
					}
				],
				// 当前菜单索引
				currentTab: 1
			}
		},
		created() {
			const res = uni.getSystemInfoSync();
			this.wHeight = res.windowHeight
		},
		onLoad() {
			this.$nextTick(()=>{
				this.$refs.topicList.doGetData();
			})
		},
		onShow() {
			if(this.currentTab === 0 ){
				this.$refs.myTopicCpn.onShowMtd()
			}else{
				this.$nextTick(()=>{
					this.$refs.topicList.doGetData();
				})
			}
		},
		methods: {		
			// tabbar点击
			tabsClick(e) {
				this.currentTab = e.index
				// if(this.currentTab === 0 ){
				// 	this.$refs.myTopicCpn.tabsChange()
				// }
			},
			// swiper滑动
			changeSwiper(e) {
				this.currentTab = e.detail.current
				if(this.currentTab === 0 ){
					this.$refs.myTopicCpn.tabsChange()
				}
			},
			// 前往创建话题
			gotoCreate(){
				if(!this.$authUtil.isLoginedin(true)){
					return
				}
				uni.navigateTo({
					url: '/pages/topic/createTopic'
				})
			},
			// 搜索
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/searchResult'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

	.topic_type_content {
		display: flex;
		flex-direction: row;
		padding-top: 3px;
	}

	// 左部分类
	.topic_type_content_left {
		background-color: #FFFFFF;
		width: 160upx;
	}
	// 左部分类滚动
	.topic_type_scroll {
		display: flex;
		flex: 1;
		flex-direction: column;
		margin-right: 5px;
	}
	// 左部分类
	.topic_type_item {
		display: flex;
		flex-flow: column;
		line-height: 40px;
		width: 160rpx;
		height: 40px;
		font-size: 16px;
		color: #666666;
		text-align: center;

	}
	// 左部分类激活
	.topic_type_item_active {
		background-color: #55aaff;
		border-top-right-radius: 30px;
		border-bottom-right-radius: 30px;
		color: #FFFFFF;
		font-weight: 500;
		background-image: linear-gradient(45deg, #55aaff, #1cbbb4);
	}
	// 右部列表
	.topic_type_content_right {
		flex: 1;
	}



	// 导航栏
	::v-deep .u-navbar {

		.iconfont {
			font-size: 48rpx;
			color: $uni-color-green;
		}

		.nav-center {
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;

			.nav-title {
				width: 60rpx;
				font-size: 30rpx;
				padding: 0 15rpx;
				font-weight: bold;
				color: $uni-text-color-gray;
			}

			.active {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;

				.nav-title {
					color: '#303133';
				}

				.active-line {
					border-bottom: 8rpx solid $uni-color-green;
					border-radius: 20rpx;
					width: 70rpx;
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					margin-left: -35rpx;
				}
			}

		}
	}



	.news {



		.topic {
			.search-input {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				height: 70rpx;
				background-color: #F4F4F4;
				border-radius: 10rpx;
				::v-deep .u-input {
					height: 100%;
				}
			}

			.last-update {
				padding: 20rpx;

				.last-update-name {
					font-size: 32rpx;
					padding-bottom: 5rpx;
				}
			}

		}
	}
</style>
